<template>
    <el-header class="head">
        <el-row>
            <el-col :span="8" class="flexcenter">
                <el-icon style="color:orangered" size="24">
                    <ArrowLeft @click="changecollapse(true)" v-if="!collapse"></ArrowLeft>
                    <ArrowRight @click="changecollapse(false)"  v-else></ArrowRight>
                </el-icon>
                <h2 class="title">
                    千锋成绩管理系统
                </h2>
                
            </el-col>
            <el-col :span="8" class="flexcenter">
                <marquee behavior="" direction="">
                    <span class="sitem">拼搏到无能为力</span>
                    <span class="sitem">坚持到感动自己</span>
                </marquee>
            </el-col>
            <el-col :span="8" class="flexcenter">
                <div class="info" v-if="userInfo">
                    <el-dropdown @command="handleCommand">
                        <span class="uname">
                            {{userInfo.username}}
                            <el-icon :size="16">
                                <ArrowDown class="arrow" />
                            </el-icon>
                        </span>
                        
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="home">首页</el-dropdown-item>
                                <el-dropdown-item command="mine">个人中心</el-dropdown-item>
                                <el-dropdown-item command="advise">意见</el-dropdown-item>
                                <el-dropdown-item divided command="password">修改密码</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    
                    <el-tag :color="roleList.find(item=>item.role==userInfo.role).color" class="role ml10" effect="dark"  > {{roleList.find(item=>item.role==userInfo.role).label  }} </el-tag>

                    <MyAvatar></MyAvatar>

                    <el-tooltip
                        effect="dark"
                        content="退出登录"
                        placement="bottom-end"
                    >
                        <el-button @click="logoutAction" class="ml10" type="danger" :icon="Remove" circle />
                    </el-tooltip>
                    
                </div>
            </el-col>
        </el-row>

        <el-dialog
            v-model="show"
            title="修改密码"
            width="30%"
            :before-close="handleClose"
        >
            <div>
                <el-form
                    label-position="left"
                    class="myform"
                    status-icon
                    :model="form"
                    ref="uform"
                    :size="formSize"
                    :rules="rules"
                >
                    <el-form-item label="旧密码" prop="oldpass">
                        <el-input :prefix-icon="Lock"  show-password v-model="form.oldpass" type="password" placeholder="请输入密码"  autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="新密码" prop="newpass">
                        <el-input :prefix-icon="Lock"  show-password v-model="form.newpass" type="password" placeholder="请输入密码"  autocomplete="off" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="info" @click="show = false">取消</el-button>
                    <el-button type="danger" @click="confirmUpdate">确认修改</el-button>
                </span>
            </template>
        </el-dialog>
    </el-header>
</template>

<script setup>
import {ArrowDown, Delete , Remove, Lock , ArrowLeft ,ArrowRight  } from "@element-plus/icons-vue"
import { reactive, ref } from "vue"
import {roleList} from '@/utils'
import MyAvatar from './MyAvatar.vue'
import { useRouter } from "vue-router"
import { useStore } from "vuex"
import {ElMessageBox, ElMessage } from "element-plus"
import {reg} from "@/utils/validate"
import {Http} from "@/api"


const show = ref(false)
const router = useRouter()
const store = useStore()
const form = ref({

})
const formSize = ref("default")
const uform = ref();
const rules = reactive({
    oldpass:[
        {required: true, message: '请输入旧密码', trigger: 'blur'},
        {pattern:reg.pwd  , message: '请输入6-16位数字加字母组合的密码', trigger: 'blur'},
    ],
    newpass:[
        {required: true, message: '请输入新密码', trigger: 'blur'},
        {pattern:reg.pwd  , message: '请输入6-16位数字加字母组合的密码', trigger: 'blur'},
    ],
})
const handleClose = ()=>{show.value =false} 
const confirmUpdate = ()=>{
    uform.value.validate(async (valid)=>{
        if(valid){
            if(form.value.oldpass == form.value.newpass){
                ElMessage.error("新旧密码不能一致,请修改")
            }else{
                // ajax 
                let res = await Http.changepass(form.value)
                if(res.code==200){
                    router.replace("/login");
                    sessionStorage.removeItem("autoToken")
                    store.commit("getuserinfo",null) 
                    show.value = false;
                }
            }
        }else{
            ElMessage.error("请输入有效的密码")
        }
    })
}
const logoutAction = ()=>{
    ElMessageBox.confirm(
        '你确定要退出登录吗?',
        '警告',
    {
        confirmButtonText: '确定退出',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(() => {
        router.replace("/login");
        sessionStorage.removeItem("autoToken")
        store.commit("getuserinfo",null) 
    })
    .catch(() => {
        
    })
}   
const handleCommand = (command)=>{
    console.log(command)
    if(command=='password'){
        show.value = true;
    }else{
        // 路由跳转
    }
}
</script>


<style lang="scss" >
.el-header{
    background: #ccc;
    .flexcenter{
        display: flex;
        align-items: center;
        height:60px;
    }
    .title{
        color:orangered;
        font-weight: bold;
        font-size: 18px;
    }
    .sitem{
        margin:0 5px;
        color:darkorange;
        font-size: 14px;
    }
    .info{
        padding-left:20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width:100%;
        .ml10{
            margin-left: 10px;
        }
        .uname{
            display: flex;
            align-items: center;
            color:#fff;
            cursor: pointer;

        }
    }
}
</style>